<template>
    <!-- <el-dialog title="项目要点" v-model="dialogVisible" width="1100px" @closed="handleClose"> -->
    <el-card v-if="visibleShow">
        <template #header>
            <div class="head-container flexC">
                <p class="title">项目要点</p>
                <div>
                    <el-button type="primary" v-if="!EditType" :icon="Edit"   @click="handleEdit">编辑</el-button>
                    <el-button type="primary" v-else :loading="submitLoading" :icon="Select"  @click="handleSave">保存</el-button>
                </div>
            </div>
        </template>
        <el-form :model="dialogObj" label-width="100px" label-position="left">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="供应商">
                        <span v-if="!EditType" >
                            {{ dialogObj?.partB || '--' }}
                        </span>
                        <el-input v-else v-model="dialogObj.partB" clearable placeholder="请输入供应商"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人">
                        <span v-if="!EditType">
                            {{ dialogObj?.representativeB || '--' }} 
                        </span>
                        <el-input v-else v-model="dialogObj.representativeB" clearable placeholder="请输入联系人"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话">
                        <span v-if="!EditType">
                            {{ dialogObj?.telB || '--' }}
                        </span>
                        <el-input v-else v-model="dialogObj.telB" clearable placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="合同日期">
                        <span v-if="!EditType">
                            {{ dialogObj?.signTime || '--' }}
                        </span>
                        <el-date-picker v-else v-model="dialogObj.signTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%"></el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- <br> -->
                <!-- <el-col :span="12">
                    <el-form-item label="使用科室">
                        <span v-if="!EditType">
                            {{ dialogObj?.department || '--' }}
                        </span>
                        <el-input v-else v-model="dialogObj.department" clearable placeholder="请输入使用科室"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资金来源">
                        <span v-if="!EditType">
                            {{ dialogObj?.fundingSource || '--' }}
                        </span>
                        <el-input v-else v-model="dialogObj.fundingSource" clearable placeholder="请输入资金来源"/>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="合同总金额">
                        <span v-if="!EditType">
                            {{ dialogObj?.zongjine || '--' }}
                        </span>
                        <el-input-number :controls="false" v-else :min="0" :precision="2" v-model="dialogObj.zongjine" clearable placeholder="请输入合同总金额" style="width: 100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="产品信息" label-width="auto" style="font-weight: 600;"></el-form-item>
                    <el-table :data="ProductList" style="width: 100%" >
                        <el-table-column label="产品名称" min-width="180" >
                            <template #default="scope">
                                <span v-if="!EditType">
                                    {{ scope.row.name || '--' }}
                                </span>
                                <el-input v-else v-model="scope.row.name" clearable placeholder="请输入产品名称"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="品牌" min-width="180" >
                            <template #default="scope">
                                <span v-if="!EditType">
                                    {{ scope.row.brand || '--' }}
                                </span>
                                <el-input v-else v-model="scope.row.brand" clearable placeholder="请输入品牌"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="规格型号" min-width="180" >
                            <template #default="scope">
                                <span v-if="!EditType">
                                    {{ scope.row.model || '--' }}
                                </span>
                                <el-input v-else v-model="scope.row.model" clearable placeholder="请输入规格型号"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" min-width="120" >
                            <template #default="scope">
                                <span v-if="!EditType">
                                    {{ scope.row.quantity || '--' }}
                                </span>
                                <el-input-number :controls="false" v-else :min="0" :precision="0" v-model="scope.row.quantity" clearable placeholder="请输入数量" style="width: 100%"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="单价" min-width="180" >
                            <template #default="scope">
                                <span v-if="!EditType">
                                    {{ scope.row.unitPrice || '--' }}
                                </span>
                                <el-input-number :controls="false" v-else :min="0" :precision="2" v-model="scope.row.unitPrice" clearable placeholder="请输入单价" style="width: 100%"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="总价" min-width="180" >
                            <template #default="scope">
                                <span v-if="!EditType">
                                    {{ scope.row.totalPrice || '--' }}
                                </span>
                                <el-input-number :controls="false" v-else :min="0" :precision="2" v-model="scope.row.totalPrice" clearable placeholder="请输入总价" style="width: 100%"/>
                            </template>
                        </el-table-column>
                    </el-table>                        
                </el-col>                
            </el-row>
        </el-form>
        <!-- <div class="dialog-footer" align="center">
            <el-button  @click="dialogVisible = false">关闭</el-button>
            <el-button type="primary" :loading="submitLoading" @click="">保存</el-button>
        </div> -->
    </el-card>
    <div class="el-card retrleve flexC"  @click="drawerShow = true" v-if="retrieveTextShow">
        <el-icon style="margin-right: 5px;font-size: 25px;"><DArrowLeft class="cursor-icon"/></el-icon>
        <el-button type="primary"  link>
            检索文本
        </el-button>
    </div>
    <el-drawer
        v-model="drawerShow"
        title="检索"
        :size="900"
        :direction="direction"
    >
        <el-table :data="PathList" style="width: 100%" >
            <el-table-column label="检索文本" min-width="180" show-overflow-tooltip>
                <template #default="scope">
                    <p v-html="scope.row.content"></p>
                </template>
            </el-table-column>
            <el-table-column  label="操作" width="120">
                <template #default="scope">
                    <el-button type="text" @click="handleDownLoad(scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-drawer>
    <!-- </el-dialog> -->
</template>

<script setup>
import { ref, defineEmits, defineExpose, onMounted, defineProps, getCurrentInstance } from 'vue'
import { useRoute,  } from 'vue-router'
import { projectSave } from '@/api/project'
import { projectDocumentGet } from '@/api/user'
import { ArrowLeft, Edit, Select, DArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import moment from 'moment'
const { proxy } = getCurrentInstance();
const visibleShow = ref(false)
const drawerShow = ref(false)
const retrieveTextShow = ref(false)
const EditType = ref(false)
const PathList = ref([])
const loading = ref(false)
const submitLoading = ref(false)
const route = useRoute()
const ProductList = ref([])
const dialogObj = ref({})
const dialogVisible = ref(false)
const emit = defineEmits(['close'])
const details = defineProps({
    detail: {
        type: Object,
        default: () => ({}) 
    }
})
// 打开
const open = () => {
    // dialogVisible.value = true;
    // getMainPointData()
}
onMounted(() => {
    if(route.query?.type && route.query?.type == 'SearchProject' && route.query?.key){
        retrieveTextShow.value = true;
    }else{
        retrieveTextShow.value = false;
    }
    getMainPointData()
})
const getMainPointData = async () => {
    loading.value = true;
    let res= await projectDocumentGet({
        projectId: route.query.id,
        key:route.query?.key
    })
    loading.value = true;
    if(res.errorCode == 0){
        if(res.data.extract){
            visibleShow.value = true;
            res.data.extract.signTime = res.data.extract?.signTime ? moment(res.data.extract.signTime,'YYYY年MM月DD日').format('YYYY-MM-DD') : '';
        }
        dialogObj.value = res.data.extract;
        ProductList.value = res.data.produces;
        if(!res.data?.subPaths){
            PathList.value = [];
        }else{
            if(route.query?.key){
                PathList.value = res.data.subPaths?.map(item=>{
                    return {
                        imgUrl: item.imgUrl,
                        content: route.query.key ?  item.content.replace(new RegExp(route.query.key, 'g'), `<span style="color:red">${route.query.key}</span>`) : item.content,
                    }
                });
            }
        }
    }
}
// 关闭
const handleClose = () =>{

}
const handleEdit = () => {
    EditType.value = true;

}
// 保存
const handleSave = async () => {
    submitLoading.value = true;
    let result = await projectSave({
        extract: dialogObj.value,
        produces: ProductList.value,
    })
    submitLoading.value = false;
    if(result.errorCode == 0){
        dialogVisible.value = false;
        EditType.value = false;
        emit('close');
        ElMessage.success('保存成功');
    }
}
const handleDownLoad = async (row) => {
    // downloadFile(path);
    // window.open('http://localhost:10899/file/download?fileId='+row.fileId);
    proxy.$ViewerApi([row.imgUrl]);
}
defineExpose({ open, getMainPointData })
</script>

<style lang="scss" scoped>
.cursor-icon{
    cursor: pointer;
    color: var(--el-color-primary);
}
.head-container {
    justify-content: space-between;
    .title{
        font-weight: 600;
        font-size: 18px;
        .sub-title{
            font-size: 12px;
            color: var(--el-color-warning);
            margin-left: 15px;            
        }
    }
}
.retrleve{
    position: fixed;
    right: 0;
    bottom: 30%;
    z-index: 10;
    padding: 12px;
    background: var(--el-color-primary-light-3);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    *{
        color: #fff;
        font-size: 18px;
    }
}
</style>